<script setup lang="ts">
import { onUnmounted, reactive, ref } from 'vue'
import * as admin from '@/apis/admin'
import { useUserInfo } from '@/stores/userInfo'
const userInfo = useUserInfo()
const loading = ref(true)
const loading2 = ref(false)

// do not use same name with ref
const form = ref({
  d: '',
  h: '',
  log: []
})
let firstLoadInfo = true
function getInfo() {
  loading2.value = false
  admin.reptileInfo().then(res => {
    if (firstLoadInfo) {
      firstLoadInfo = false
      form.value = res.data
    } else {
      form.value.log = res.data.log
    }
    loading.value = false
  })
}
getInfo()
const getInfoTimer = setInterval(() => {
  getInfo()
}, 1000)

onUnmounted(() => {
  clearInterval(getInfoTimer)
})

const onSubmit = () => {
  if (parseInt(form.value.d) < 60000) {
    ElMessage('时间不得低于60000(一秒)')
    return
  }
  if (parseInt(form.value.h) < 1) {
    ElMessage('时限不得低于1小时')
    return
  }
  loading2.value = true
  admin
    .reptileSet(parseInt(form.value.d), parseInt(form.value.h), userInfo.username)
    .then(res => {
      ElMessage(res.data.msg)
      firstLoadInfo = true
      getInfo()
    })
    .catch(res => {
      getInfo()
    })
}

function getFormtTime(dateTime: number | string, flag?: boolean) {
  if (dateTime != null) {
    //若传入的dateTime为字符串类型，需要进行转换成数值，若不是无需下面注释代码
    var time = parseInt(dateTime as string)
    var date = new Date(time)
    //获取年份
    var YY = date.getFullYear()
    //获取月份
    var MM = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
    //获取日期
    var DD = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
    if (flag) {
      //flag为true，显示时分秒格式
      //获取小时
      var hh = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
      //获取分
      var mm = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
      ///获取秒
      var ss = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
      //返回时间格式： 2020-11-09 13:14:52
      return YY + '-' + MM + '-' + DD + ' ' + hh + ':' + mm + ':' + ss
    } else {
      //返回时间格式： 2020-11-09
      return YY + '-' + MM + '-' + DD
    }
  } else {
    return ''
  }
}
</script>

<template>
  <el-card class="box-card" v-loading="loading || loading2">
    <template #header>
      <div class="card-header">
        <h2>爬虫设置</h2>
      </div>
    </template>
    <el-form :model="form" label-width="120px">
      <el-form-item label="更新定时周期">
        <el-input v-model="form.d" placeholder="x毫秒/更新1次" />
      </el-form-item>
      <el-form-item label="更新时限">
        <el-input v-model="form.h" placeholder="x小时内的更新，最低1小时" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">确认设置</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="form.log" style="width: 100%">
      <el-table-column label="时间">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <el-icon><timer /></el-icon>
            <span style="margin-left: 10px">{{ getFormtTime(scope.row.split('|')[0], true) }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="日志">
        <template #default="scope">
          <span style="margin-left: 10px">{{ scope.row.split('|')[1] }}</span>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<style scoped lang="less"></style>
